<template>
  <view class="checkout-container">
    <!-- 页面头部 -->
    <!-- <view class="page-header">
      <view class="header-left">
        <view class="back-btn" @tap="goBack">
          <uni-icons type="left" size="20" color="#2D3748"></uni-icons>
        </view>
        <text class="page-title">{{ pageTitle }}</text>
      </view>
      <view class="step-indicator">
        <text class="step-text">2/3</text>
      </view>
    </view> -->

    <!-- 临时测试登录按钮 -->
    <!-- <view class="test-login-section" style="padding: 20rpx; background: #fff; margin: 20rpx; border-radius: 10rpx;">
      <button size="mini" type="primary" @tap="mockLogin">临时测试登录</button>
    </view> -->

    <scroll-view scroll-y="true" class="checkout-scroll" show-scrollbar="false">
      <!-- 收货地址 -->
      <view class="address-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="location" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">收货地址</text>
        </view>
        
        <view v-if="selectedAddress" class="address-card" @tap="selectAddress">
          <view class="address-info">
            <view class="address-top">
              <text class="receiver-name">{{ selectedAddress.name }}</text>
              <text class="receiver-phone">{{ selectedAddress.phone }}</text>
              <view v-if="selectedAddress.isDefault" class="default-badge">
                <text>默认</text>
              </view>
            </view>
            <text class="address-detail">{{ selectedAddress.address }}</text>
          </view>
          <view class="address-arrow">
            <uni-icons type="right" size="16" color="#A0AEC0"></uni-icons>
          </view>
        </view>
        
        <view v-else class="no-address" @tap="selectAddress">
          <view class="no-address-icon">
            <uni-icons type="plus" size="24" color="#667eea"></uni-icons>
          </view>
          <text class="no-address-text">请添加收货地址</text>
          <view class="address-arrow">
            <uni-icons type="right" size="16" color="#A0AEC0"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="goods-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="shop" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">商品清单</text>
          <text class="goods-count">({{ goodsList.length }}件)</text>
        </view>
        
        <view class="goods-list">
          <view 
            v-for="(item, index) in goodsList" 
            :key="index"
            class="goods-item"
          >
            <view class="goods-image-wrapper">
              <image :src="item.image" mode="aspectFill" class="goods-image"></image>
              <view v-if="item.badge" class="goods-badge">
                <text>{{ item.badge }}</text>
              </view>
            </view>
            
            <view class="goods-info">
              <text class="goods-name">{{ item.name }}</text>
              <view class="goods-specs">
                <text class="spec-text">规格: {{ item.spec }}</text>
                <view class="quality-badge">
                  <uni-icons type="checkmarkempty" size="12" color="#38A169"></uni-icons>
                  <text>正品保证</text>
                </view>
              </view>
              <view class="goods-price-quantity">
                <text class="goods-price">¥{{ parseFloat(item.price || 0).toFixed(2) }}</text>
                <text class="goods-quantity">x{{ item.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 配送方式 -->
      <view class="delivery-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="car" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">配送方式</text>
        </view>
        
        <view class="delivery-options">
          <view 
            v-for="(option, index) in deliveryOptions"
            :key="index"
            class="delivery-option"
            :class="{ 'selected': selectedDelivery === index }"
            @tap="selectDelivery(index)"
          >
            <view class="option-radio">
              <view class="radio-btn" :class="{ 'checked': selectedDelivery === index }">
                <view v-if="selectedDelivery === index" class="radio-dot"></view>
              </view>
            </view>
            <view class="option-content">
              <view class="option-header">
                <text class="option-name">{{ option.name }}</text>
                <text class="option-time">{{ option.time }}</text>
              </view>
              <text class="option-desc">{{ option.desc }}</text>
              <text class="option-price">{{ option.price === 0 ? '免费' : `¥${option.price}` }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 支付方式 -->
      <view class="payment-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="wallet" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">支付方式</text>
        </view>
        
        <!-- 线上支付 -->
        <view class="payment-category">
          <view class="category-header">
            <view class="category-icon">
              <uni-icons type="wifi" size="16" color="#667eea"></uni-icons>
            </view>
            <text class="category-title">线上支付</text>
            <text class="category-desc">安全便捷，即时到账</text>
          </view>
          
          <view class="payment-options">
            <view 
              v-for="(payment, index) in paymentMethods.online"
              :key="index"
              class="payment-option"
              :class="{ 'selected': selectedPayment.type === 'online' && selectedPayment.method && selectedPayment.method.id === payment.id }"
              :data-type="'online'"
              :data-index="index"
              @tap="selectPaymentMethod"
            >
              <view class="payment-icon">
                <uni-icons :type="payment.icon" size="24" :color="payment.color"></uni-icons>
              </view>
              <view class="payment-info">
                <text class="payment-name">{{ payment.name }}</text>
                <text class="payment-desc">{{ payment.desc }}</text>
              </view>
              <view class="payment-radio">
                <view class="radio-btn" :class="{ 'checked': selectedPayment.type === 'online' && selectedPayment.method && selectedPayment.method.id === payment.id }">
                  <view v-if="selectedPayment.type === 'online' && selectedPayment.method && selectedPayment.method.id === payment.id" class="radio-dot"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 线下支付 -->
        <view class="payment-category">
          <view class="category-header">
            <view class="category-icon">
              <uni-icons type="compose" size="16" color="#FF6B6B"></uni-icons>
            </view>
            <text class="category-title">线下支付</text>
            <text class="category-desc">先下单，支付后上传回执</text>
          </view>
          
          <view class="payment-options">
            <view 
              v-for="(payment, index) in paymentMethods.offline"
              :key="index"
              class="payment-option"
              :class="{ 'selected': selectedPayment.type === 'offline' && selectedPayment.method && selectedPayment.method.id === payment.id }"
              :data-type="'offline'"
              :data-index="index"
              @tap="selectPaymentMethod"
            >
              <view class="payment-icon">
                <uni-icons :type="payment.icon" size="24" :color="payment.color"></uni-icons>
              </view>
              <view class="payment-info">
                <text class="payment-name">{{ payment.name }}</text>
                <text class="payment-desc">{{ payment.desc }}</text>
              </view>
              <view class="payment-radio">
                <view class="radio-btn" :class="{ 'checked': selectedPayment.type === 'offline' && selectedPayment.method && selectedPayment.method.id === payment.id }">
                  <view v-if="selectedPayment.type === 'offline' && selectedPayment.method && selectedPayment.method.id === payment.id" class="radio-dot"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 线下支付说明 -->
        <view v-if="selectedPayment.type === 'offline'" class="offline-notice">
          <view class="notice-header">
            <uni-icons type="info" size="16" color="#FF6B6B"></uni-icons>
            <text class="notice-title">线下支付说明</text>
          </view>
          <view class="notice-content">
            <text v-if="selectedPayment.method && selectedPayment.method.id === 'bank_transfer'" class="notice-text">
              1. 提交订单后，您将收到银行转账信息
              2. 完成转账后，请上传转账回执单
              3. 我们确认收款后将安排发货
            </text>
            <text v-if="selectedPayment.method && selectedPayment.method.id === 'cash'" class="notice-text">
              1. 选择货到付款，无需预付费用
              2. 商品送达时现场验货付款
              3. 支持现金、扫码等多种付款方式
            </text>
          </view>
        </view>
      </view>

      <!-- 优惠券 -->
      <!-- <view class="coupon-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="gift" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">优惠券</text>
        </view>
        
        <view class="coupon-selector" @tap="selectCoupon">
          <view class="coupon-info">
            <text class="coupon-text">
              {{ selectedCoupon ? `已选择: ${selectedCoupon.name}` : '选择可用优惠券' }}
            </text>
            <text v-if="selectedCoupon" class="coupon-discount">-¥{{ selectedCoupon.discount }}</text>
          </view>
          <view class="coupon-arrow">
            <uni-icons type="right" size="16" color="#A0AEC0"></uni-icons>
          </view>
        </view>
      </view> -->

      <!-- 订单备注 -->
      <view class="remark-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="compose" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">订单备注</text>
        </view>
        
        <view class="remark-input-wrapper">
          <textarea 
            class="remark-input"
            placeholder="选填: 请输入订单备注信息..."
            v-model="orderRemark"
            maxlength="200"
            auto-height
          ></textarea>
          <text class="char-count">{{ orderRemark.length }}/200</text>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="price-section">
        <view class="section-header">
          <view class="header-icon">
            <uni-icons type="list" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="section-title">费用明细</text>
        </view>
        
        <view class="price-details">
          <view class="price-item">
            <text class="price-label">商品金额</text>
            <text class="price-value">¥{{ parseFloat(goodsTotal || 0).toFixed(2) }}</text>
          </view>
          <view class="price-item">
            <text class="price-label">运费</text>
            <text class="price-value">{{ deliveryFee === 0 ? '免费' : `¥${deliveryFee}` }}</text>
          </view>
          <view v-if="selectedCoupon" class="price-item discount">
            <text class="price-label">优惠券折扣</text>
            <text class="price-value">-¥{{ selectedCoupon.discount }}</text>
          </view>
          <view class="price-divider"></view>
          <view class="price-item total">
            <text class="price-label">实付金额</text>
            <text class="price-value">¥{{ parseFloat(totalPrice || 0).toFixed(2) }}</text>
          </view>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-summary">
        <text class="total-label">实付:</text>
        <text class="total-price">¥{{ parseFloat(totalPrice || 0).toFixed(2) }}</text>
      </view>
      <button 
        class="submit-btn" 
        :class="{ 'loading': isSubmitting }"
        @tap="submitOrder"
        :disabled="isSubmitting || !canSubmit"
      >
        <view v-if="isSubmitting" class="loading-spinner"></view>
        <text>{{ submitButtonText }}</text>
      </button>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe"></view>
  </view>
</template>

<script>
import { createOrder } from '@/api/order'
import { getDefaultAddress } from '@/api/user/address'

export default {
  data() {
    return {
      selectedAddress: null,
      selectedDelivery: 0,
      selectedPayment: {
        type: 'online', // online 或 offline
        method: null    // 选中的支付方式对象
      },
      selectedCoupon: null,
      orderRemark: '',
      isSubmitting: false,
      orderType: 'unknown', // 订单类型：buy（直接购买）、cart（购物车结算）
      
      // 商品列表 - 从页面参数中获取
      goodsList: [],
      
      // 配送方式
      deliveryOptions: [
        {
          name: '顺丰快递',
          time: '预计1-2天送达',
          desc: '安全快速，支持上门取件',
          price: 0
        },
        {
          name: '申通快递',
          time: '预计2-3天送达',
          desc: '价格实惠，服务可靠',
          price: 8
        },
        {
          name: '自提',
          time: '工作日9:00-18:00',
          desc: '门店自提，免运费',
          price: 0
        }
      ],
      
      // 支付方式 - 分为线上和线下
      paymentMethods: {
        online: [
          {
            id: 'wechat',
            name: '微信支付',
            desc: '安全便捷，推荐使用',
            icon: 'weixin',
            color: '#07C160',
            type: 'online'
          },
          {
            id: 'bank',
            name: '银行卡支付',
            desc: '支持各大银行卡',
            icon: 'vip',
            color: '#1677FF',
            type: 'online'
          }
        ],
        offline: [
          {
            id: 'bank_transfer',
            name: '银行转账',
            desc: '转账后上传回执单',
            icon: 'wallet',
            color: '#FF6B6B',
            type: 'offline'
          },
          {
            id: 'cash',
            name: '货到付款',
            desc: '送货上门现金支付',
            icon: 'shop',
            color: '#38A169',
            type: 'offline'
          }
        ]
      }
    }
  },

  computed: {
    // 页面标题
    pageTitle() {
      switch (this.orderType) {
        case 'buy':
          return '确认订单'
        case 'cart':
          return '购物车结算'
        default:
          return '确认订单'
      }
    },

    // 商品总价
    goodsTotal() {
      return this.goodsList.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2)
    },

    // 运费
    deliveryFee() {
      const option = this.deliveryOptions[this.selectedDelivery]
      return option ? option.price : 0
    },

    // 总价
    totalPrice() {
      let total = parseFloat(this.goodsTotal) + this.deliveryFee
      if (this.selectedCoupon) {
        total -= this.selectedCoupon.discount
      }
      return Math.max(0, total).toFixed(2)
    },

    // 是否可以提交
    canSubmit() {
      return this.selectedAddress && 
             this.goodsList.length > 0 && 
             this.selectedPayment.method !== null
    },

    // 提交按钮文字
    submitButtonText() {
      if (this.isSubmitting) {
        return '提交中...'
      }
      
      if (this.selectedPayment.type === 'online') {
        return '提交订单并支付'
      } else {
        return '提交订单'
      }
    }
  },
  
  onShow() {
    // 页面显示时检查是否有新选择的地址
    const selectedAddress = uni.getStorageSync('selectedAddress')
    if (selectedAddress) {
      this.selectedAddress = selectedAddress
      // 清除存储，避免重复使用
      uni.removeStorageSync('selectedAddress')
    }
  },
  
  onLoad(options) {
    if (options.goodsData) {
      try {
        this.goodsList = JSON.parse(decodeURIComponent(options.goodsData))
        
        // 验证商品数据完整性并修复异常数据
        this.goodsList = this.goodsList.map((item, index) => {
          const fixedItem = {
            ...item,
            id: item.id || item.goodsId || `temp_${index}`,
            name: item.name || '未知商品',
            price: Math.max(0.01, parseFloat(item.price) || 0.01),
            quantity: Math.max(1, parseInt(item.quantity) || 1),
            spec: item.spec || '默认规格',
            specId: item.specId || 'default',
            image: item.image || '/static/logo.jpg'
          }
          return fixedItem
        })
        
      } catch (error) {
        uni.showToast({
          title: '商品数据解析失败',
          icon: 'none'
        })
        this.goodsList = []
      }
    }
    
    this.checkLoginState()
    this.calculateTotal()
    
    // 注册事件监听
    uni.$on('addressSelected', (address) => {
      this.selectedAddress = address
    })
  },
  
  onUnload() {
    // 页面卸载时移除事件监听
    uni.$off('addressSelected')
  },
  
  methods: {
    async checkLoginState() {
      const token = uni.getStorageSync('token')
      const userInfo = uni.getStorageSync('userInfo') 
      const isLogin = uni.getStorageSync('isLogin')

      if (!token || !userInfo || !isLogin) {
        // 模拟登录
        await this.mockLogin()
      }
    },

    async mockLogin() {
      try {
        const mockUserInfo = {
          id: 1,
          nickname: '测试用户',
          avatar: 'https://example.com/avatar.jpg',
          phone: '138****8888'
        }
        
        uni.setStorageSync('token', 'mock_token_' + Date.now())
        uni.setStorageSync('userInfo', mockUserInfo)
        uni.setStorageSync('isLogin', true)
      } catch (error) {
        // 模拟登录失败处理
      }
    },

    selectPayment(method) {
      this.selectedPayment = method
    },

    async submitOrder() {
      if (!this.selectedAddress) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'none'
        })
        return
      }

      if (!this.selectedPayment.method) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return
      }

      try {
        this.isSubmitting = true
        
        // 确保所有数值都是有效的数字类型
        const orderData = {
          order_type: 'goods',
          address_id: this.selectedAddress.id,
          payment_method: this.selectedPayment.method.name,
          payment_type: this.selectedPayment.type, // online 或 offline
          goods_list: this.goodsList.map(item => {
            // 更严格的数值转换，确保不为null
            const quantity = Math.max(1, parseInt(item.quantity) || 1)
            const price = Math.max(0.01, parseFloat(item.price) || 0.01)
            
            return {
              goods_id: item.id || item.goodsId || 'unknown',
              spec_id: item.specId || 'default',
              quantity: quantity,
              price: price
            }
          }),
          total_amount: Math.max(0.01, parseFloat(this.totalPrice) || 0.01),
          shipping_fee: Math.max(0, parseFloat(this.deliveryFee) || 0),
          coupon_id: this.selectedCoupon ? this.selectedCoupon.id : null,
          remark: this.orderRemark || ''
        }

        // 检查商品列表是否有效
        if (!Array.isArray(orderData.goods_list) || orderData.goods_list.length === 0) {
          throw new Error('商品列表为空')
        }

        // 检查每个商品的数据完整性
        for (let item of orderData.goods_list) {
          if (!item.goods_id || item.price <= 0 || item.quantity <= 0) {
            throw new Error(`商品数据异常: ID=${item.goods_id}, 价格=${item.price}, 数量=${item.quantity}`)
          }
        }

        // 最终数据检查
        if (orderData.total_amount <= 0) {
          throw new Error('订单总金额异常')
        }

        const response = await createOrder(orderData)
        
        if (response && response.data) {
          const orderId = response.data.tradeNo || response.data.trade_no
          console.log("=========response=========",response)
          console.log("=========orderId=========",orderId)
          // 根据支付方式跳转不同页面
          if (this.selectedPayment.type === 'online') {
            // 线上支付：跳转到支付页面
            uni.navigateTo({
              url: `/pages/order/pay?orderId=${orderId}&paymentMethod=${this.selectedPayment.method.id}`
            })
          } else {
            // 线下支付：直接跳转到订单成功页面，显示等待回执状态
            uni.navigateTo({
              url: `/pages/order/success?orderId=${orderId}&paymentType=offline`
            })
          }
          
          // 清除购物车中已购买的商品
          try {
            await this.clearPurchasedItems()
          } catch (error) {
            // 清除购物车失败不影响主流程，只记录错误
          }
        } else {
          throw new Error(response.message || '订单创建失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '提交订单失败',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
      }
    },

    async clearPurchasedItems() {
      try {
        // 获取已购买商品的ID列表
        const purchasedCartIds = this.goodsList.map(item => {
          // 使用不同的ID字段匹配
          return item.cart_id || item.id || item.goodsId
        }).filter(id => id) // 过滤掉无效的ID
        
        if (purchasedCartIds.length === 0) {
          return
        }
        console.log("=========已购买商品的ID列表=========",purchasedCartIds)
        // 调用删除购物车商品的API
        const { deleteCartItems } = require('@/api/order/cart')
        await deleteCartItems(purchasedCartIds)
        
        // 显示成功提示
        uni.showToast({
          title: '已从购物车移除',
          icon: 'success',
          duration: 1500
        })
        
        // 同时清理本地存储（备用方案）
        const cartList = uni.getStorageSync('cartList') || []
        const remainingItems = cartList.filter(item => 
          !purchasedCartIds.includes(item.id) && 
          !purchasedCartIds.includes(item.goodsId) &&
          !purchasedCartIds.includes(item.cart_id)
        )
        uni.setStorageSync('cartList', remainingItems)
        
      } catch (error) {
        // 如果API调用失败，至少清理本地存储
        try {
          const cartList = uni.getStorageSync('cartList') || []
          const purchasedIds = this.goodsList.map(item => item.id || item.goodsId)
          const remainingItems = cartList.filter(item => 
            !purchasedIds.includes(item.id) && 
            !purchasedIds.includes(item.goodsId)
          )
          uni.setStorageSync('cartList', remainingItems)
        } catch (localError) {
          // 本地存储清理也失败时不做处理
        }
      }
    },

    // 返回
    goBack() {
      uni.navigateBack()
    },

    // 选择地址
    selectAddress() {
      uni.navigateTo({
        url: '/pages/address/list?from=checkout'
      })
    },

    // 选择配送方式
    selectDelivery(index) {
      this.selectedDelivery = index
    },

    // 选择支付方式（新方法，通过data属性）
    selectPaymentMethod(e) {
      const type = e.currentTarget.dataset.type
      const index = parseInt(e.currentTarget.dataset.index)
      
      let method = null
      if (type === 'online') {
        method = this.paymentMethods.online[index]
      } else if (type === 'offline') {
        method = this.paymentMethods.offline[index]
      }
      
      if (method) {
        this.selectedPayment = {
          type: type,
          method: method
        }
      }
    },

    // 选择支付方式（保留旧方法用于兼容）
    selectPayment(type, method) {
      this.selectedPayment = {
        type: type,
        method: method
      }
    },

    // 选择优惠券
    selectCoupon() {
      uni.navigateTo({
        url: '/pages/coupon/list?from=checkout&total=' + this.goodsTotal,
        events: {
          selectCoupon: (coupon) => {
            this.selectedCoupon = coupon
          }
        }
      })
    },

    // 加载默认地址
    async loadDefaultAddress() {
      // 模拟从本地存储加载默认地址
      // const addresses = uni.getStorageSync('addressList') || []
      // this.selectedAddress = addresses.find(addr => addr.isDefault) || addresses[0] || null

      const res = await getDefaultAddress()
      const address = res.data
      
      // 如果没有地址，使用默认地址
      if (!address) {
        this.selectedAddress = {
          id: 1,
          name: '张三',
          phone: '138****8888',
          address: '北京市朝阳区xxx路xxx号',
          isDefault: true
        }
      }else{
          this.selectedAddress = {
            id: address.address_id,
            name: address.name,
            phone: address.phone,
            address: address.detail,
            isDefault: address.is_default
          }
      }
    },

    // 从购物车加载商品
    loadGoodsFromCart(goodsIds) {
      // 模拟从购物车加载选中的商品
      const cart = uni.getStorageSync('cartList') || []
      this.goodsList = cart.filter(item => 
        goodsIds.includes(item.id.toString()) && item.selected
      )
    },

    // 计算总金额
    calculateTotal() {
      this.checkLoginState()
      this.loadDefaultAddress()
    },

    // 添加更新地址的方法，供地址列表页面调用
    updateSelectedAddress(address) {
      this.selectedAddress = address
    }
  }
}
</script>

<style lang="scss">
.checkout-container {
  min-height: 100vh;
  background: #F8FAFC;
  padding-bottom: 140rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F7FAFC;
  margin-right: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2D3748;
}

.step-indicator {
  padding: 8rpx 16rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12rpx;
  
  .step-text {
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
  }
}

.checkout-scroll {
  height: calc(100vh - 140rpx);
  padding: 20rpx 0;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.header-icon {
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D3748;
}

.goods-count {
  font-size: 24rpx;
  color: #718096;
  margin-left: 8rpx;
}

// 地址部分
.address-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.address-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
  border-radius: 16rpx;
  border: 2rpx solid #E2E8F0;
  transition: all 0.3s ease;
}

.address-card:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #EDF2F7, #E2E8F0);
}

.address-info {
  flex: 1;
}

.address-top {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.receiver-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #2D3748;
  margin-right: 20rpx;
}

.receiver-phone {
  font-size: 26rpx;
  color: #718096;
  margin-right: 16rpx;
}

.default-badge {
  padding: 4rpx 8rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 8rpx;
  font-size: 20rpx;
}

.address-detail {
  font-size: 26rpx;
  color: #4A5568;
  line-height: 1.4;
}

.no-address {
  display: flex;
  align-items: center;
  padding: 40rpx 24rpx;
  background: #F7FAFC;
  border: 2rpx dashed #E2E8F0;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.no-address:active {
  background: #EDF2F7;
  border-color: #CBD5E0;
}

.no-address-icon {
  width: 50rpx;
  height: 50rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.no-address-text {
  flex: 1;
  font-size: 28rpx;
  color: #667eea;
  font-weight: 500;
}

.address-arrow {
  margin-left: 20rpx;
}

// 商品部分
.goods-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.goods-list {
  padding: 0;
}

.goods-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F7FAFC;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-image-wrapper {
  position: relative;
  margin-right: 20rpx;
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
}

.goods-badge {
  position: absolute;
  top: 4rpx;
  left: 4rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  font-size: 18rpx;
  padding: 2rpx 6rpx;
  border-radius: 6rpx;
}

.goods-info {
  flex: 1;
}

.goods-name {
  font-size: 26rpx;
  color: #2D3748;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.goods-specs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.spec-text {
  font-size: 22rpx;
  color: #718096;
}

.quality-badge {
  display: flex;
  align-items: center;
  padding: 2rpx 6rpx;
  background: #E8F5E8;
  color: #38A169;
  border-radius: 6rpx;
  font-size: 20rpx;
  
  text {
    margin-left: 4rpx;
  }
}

.goods-price-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  font-size: 28rpx;
  color: #E53E3E;
  font-weight: bold;
}

.goods-quantity {
  font-size: 24rpx;
  color: #718096;
}

// 配送方式
.delivery-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.delivery-options {
  padding: 0;
}

.delivery-option {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #F7FAFC;
  transition: all 0.3s ease;
}

.delivery-option.selected {
  border-color: #667eea;
  background: linear-gradient(135deg, #F8FAFC, #F0F4FF);
}

.delivery-option:active {
  transform: scale(0.98);
}

.option-radio {
  margin-right: 16rpx;
  margin-top: 4rpx;
}

.radio-btn {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-btn.checked {
  border-color: #667eea;
  background: #667eea;
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  background: #fff;
  border-radius: 50%;
}

.option-content {
  flex: 1;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.option-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #2D3748;
}

.option-time {
  font-size: 22rpx;
  color: #667eea;
  font-weight: 500;
}

.option-desc {
  font-size: 22rpx;
  color: #718096;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.option-price {
  font-size: 24rpx;
  color: #E53E3E;
  font-weight: bold;
}

// 支付方式
.payment-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.payment-category {
  margin-bottom: 30rpx;
}

.payment-category:last-child {
  margin-bottom: 0;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #F8FAFC, #EDF2F7);
  border-radius: 12rpx;
  border-left: 4rpx solid #667eea;
}

.category-icon {
  width: 32rpx;
  height: 32rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}

.category-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2D3748;
  margin-right: 12rpx;
}

.category-desc {
  font-size: 22rpx;
  color: #718096;
  flex: 1;
}

.payment-options {
  padding: 0;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #F7FAFC;
  transition: all 0.3s ease;
}

.payment-option.selected {
  border-color: #667eea;
  background: linear-gradient(135deg, #F8FAFC, #F0F4FF);
}

.payment-option:active {
  transform: scale(0.98);
}

.payment-icon {
  width: 50rpx;
  height: 50rpx;
  background: #F7FAFC;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.payment-info {
  flex: 1;
}

.payment-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #2D3748;
  margin-bottom: 4rpx;
  display: block;
}

.payment-desc {
  font-size: 22rpx;
  color: #718096;
  display: block;
}

.payment-radio {
  margin-left: 20rpx;
}

// 线下支付说明
.offline-notice {
  margin-top: 24rpx;
  padding: 20rpx;
  background: linear-gradient(135deg, #FFF5F5, #FFEBEE);
  border-radius: 12rpx;
  border: 1rpx solid #FEDCDC;
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.notice-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #E53E3E;
  margin-left: 8rpx;
}

.notice-content {
  padding-left: 24rpx;
}

.notice-text {
  font-size: 24rpx;
  color: #718096;
  line-height: 1.6;
  display: block;
  white-space: pre-line;
}

// 优惠券
.coupon-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.coupon-selector {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #F7FAFC;
  border-radius: 12rpx;
  border: 2rpx solid #E2E8F0;
  transition: all 0.3s ease;
}

.coupon-selector:active {
  background: #EDF2F7;
  transform: scale(0.98);
}

.coupon-info {
  flex: 1;
}

.coupon-text {
  font-size: 26rpx;
  color: #2D3748;
  font-weight: 500;
}

.coupon-discount {
  font-size: 24rpx;
  color: #E53E3E;
  font-weight: bold;
  margin-left: 12rpx;
}

.coupon-arrow {
  margin-left: 20rpx;
}

// 订单备注
.remark-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.remark-input-wrapper {
  position: relative;
}

.remark-input {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  background: #F7FAFC;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #2D3748;
  line-height: 1.4;
  resize: none;
}

.remark-input::placeholder {
  color: #A0AEC0;
}

.char-count {
  position: absolute;
  bottom: 12rpx;
  right: 12rpx;
  font-size: 20rpx;
  color: #A0AEC0;
}

// 费用明细
.price-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.price-details {
  padding: 0;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
}

.price-item.discount {
  color: #E53E3E;
}

.price-item.total {
  border-top: 2rpx solid #F7FAFC;
  margin-top: 12rpx;
  padding-top: 20rpx;
}

.price-label {
  font-size: 26rpx;
  color: #4A5568;
}

.price-value {
  font-size: 26rpx;
  color: #2D3748;
  font-weight: 500;
}

.price-item.total .price-label,
.price-item.total .price-value {
  font-size: 30rpx;
  font-weight: bold;
}

.price-item.total .price-value {
  color: #E53E3E;
}

.price-divider {
  height: 2rpx;
  background: #F7FAFC;
  margin: 12rpx 0;
}

.bottom-placeholder {
  height: 40rpx;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.price-summary {
  display: flex;
  align-items: baseline;
}

.total-label {
  font-size: 28rpx;
  color: #4A5568;
  margin-right: 8rpx;
}

.total-price {
  font-size: 36rpx;
  color: #E53E3E;
  font-weight: bold;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx 48rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  min-width: 240rpx;
}

.submit-btn:active {
  transform: scale(0.95);
}

.submit-btn.loading {
  background: #CBD5E0;
  box-shadow: none;
}

.submit-btn:disabled {
  background: #E2E8F0;
  color: #A0AEC0;
  box-shadow: none;
  transform: none !important;
}

.submit-btn::after {
  border: none;
}

.loading-spinner {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bottom-safe {
  height: env(safe-area-inset-bottom);
  height: constant(safe-area-inset-bottom);
}
</style> 